<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>内容分发平台</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="resources/jquery-easyui-1.5.3/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="resources/jquery-easyui-1.5.3/themes/icon.css">
		<script type="text/javascript" src="resources/jquery-easyui-1.5.3/jquery.min.js"></script>
		<script type="text/javascript" src="resources/jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
		
		<style type="text/css">
	        #tt .panel-body-noborder{overflow: hidden;}
    	</style>
		
		
		<script type="text/javascript">
			var tree = function () {
				$("#tree").tree({
					url:'tree.json',
					method: 'POST',
					animate: true,
					checkbox: false,
					cascadeCheck:false,//层叠选中
					lines:true,
					onClick: function(node){
						add_tabs(node);
					}
				});
			}
			var tabs = function(){
				$('#tt').tabs({
				    border:false,
				    onSelect:function(titile){
						//alert(title+' is selected');
				    }
				});
			}
			var add_tabs = function(node){
				title = node.text;
				id = node.id;
				att = node.attributes;
				if(att != undefined){
					url = att.url;
					if(url != undefined){
						if(!$('#tt').tabs('exists',title)){
							$('#tt').tabs('add',{
								id:id,
							    title:title,
							    border: false,
							    content:'<iframe scrolling="all" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>',
							    closable:true
							});
						}else{
							$('#tt').tabs('select',title);
						}
					}
				}
			}
			$(function (){
				tree();
				tabs();
				
				
			});
		</script>
	</head>
	<body class="easyui-layout">
	    <div data-options="region:'north',split:false" style="height:80px;"></div>
	    <div data-options="region:'west',title:'导航',split:true" style="width:180px;">
	    	<ul id="tree" ></ul>
	    </div>
	    <div data-options="region:'center',title:''" style="background:#eee;" id = "tt">
	    	
	    	
	    </div>
	</body>
</html>
